<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
<script src="../vue.js"></script>
</head>

<body>
<div id="app">

<script>
    Vue.config.productionTip=false;
    Vue.prototype.$bus="公交车";
    const Count =Vue.extend({
        name: "Count",
        data() {
            return {
                count:1,
            };
        },
        template:`
        <div>
            <h1>{{count}}</h1>
            <button @click="count++">累加</button>
            <button @click="test">测试</button>
            </div>
            `,
            methods:{
                test() {
                    console.log(this.$bus);
                }
            }
    });
    const Person =Vue.extend({
        name:"Person",
        data(){
            return {
                name:"laowang",
                age:18,
            }
        }
    })
    console.log(new Count(),"new Count()是Count组件实例");
    console.log(
        new Count().__proto__,
        "向上一级找到了当前VueComponent构造函数的原型对象"
      );
      console.log(
        new Count().__proto__.__proto__,
        "再向上一级找到了Vue的原型对象上了"
      );
      console.log(
        new Count().__proto__.__proto__.__proto__,
        "再向上一级找到了Object的原型对象上"
      );
      console.log(
        new Count().__proto__.__proto__.__proto__.__proto__,
        "再向上一级找到了null"
      );

      /*
        组件实例的原型链
          Count组件实例-->Count的VueComponent原型对象-->Vue的原型对象-->Object的原型对象-->null
          student组件实例-->Student的VueComponent原型对象-->Vue的原型对象-->Object的原型对象-->null


        实际使用:
          当我们想要给所有的组件实例扩展一些方法或者属性的时候,我们可以把这个方法和属性添加在Vue的原型对象上
          [[切记,不能添加在VueComponent上,因为不同的组件 不是同个VueComponent,但是Vue只有一个]]
      */

      const vm = new Vue({
        el: "#app",
        components: {
          Count: Count,
          Person: Person,
        },
        data() {
          return {};
        },
        template: `
          <div>
            <Count/>
            <hr/>
            <Person/>
          </div>
        `,
      });
    </script>
  </body>
</html>
